<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 60%;
				margin: 30px auto;
				border: 1px solid red;
			}
			table{
				width: 100%;
			}
			tr th,tr td{
				height: 30px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="box">
			姓名:<input type="text" id="userName">
			年龄:<input type="number" id="age">
			性别:<input type="radio" name="sex" value="男" checked>男
			<input type="radio" name="sex" value="女" >女
			爱好:<input type="text" id="hobby">
			<button type="button" id="btn">添加</button> 
			<table border="1" cellspacing="0" cellpadding="0">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>爱好</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!-- <tr>
						<td>1</td>
						<td>kky</td>
						<td>22</td>
						<td>男</td>
						<td>学习</td>
						<td>
							<button type="button">上移</button>
							<button type="button">删除</button>
							<button type="button">下移</button>
						</td>
					</tr> -->
				</tbody>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		var userName = document.getElementById('userName')
		var age = document.getElementById('age')
		var hobby = document.getElementById('hobby')
		var sex = document.getElementsByName("sex")
		var tbody = document.querySelector("tbody")
		var btn = document.getElementById('btn')
		var arr = [];
		
		window.onload = function(){
		    if(localStorage.arr){
				arr = JSON.parse(localStorage.arr);
				show(arr)
			}else{
				arr = []
			}
		}
		
		btn.onclick= function(){
			for(var i=0;i<sex.length;i++){
				if(sex[i].checked){
					var tmp = sex[i].value;
				}
			}
			if(userName.value == "" || age.value =="" || hobby.value == ""){
				alert("信息不能为空")
			}else{
				var obj = {
					id:+new Date(),
					userName:userName.value,
					sex:tmp,
					age:age.value,
					hobby:hobby.value
				}
				arr.push(obj)
				userName.value = ""
				age.value =""
				hobby.value = ""
				localStorage.arr = JSON.stringify(arr)
				show(arr)
			}
		}
		
		function show(arr){
			tbody.innerHTML = ""
			for(var i=0;i<arr.length;i++){
				tbody.innerHTML +=`<tr>
							<td>${i+1}</td>
							<td>${arr[i].userName}</td>
							<td>${arr[i].age}</td>
							<td>${arr[i].sex}</td>
							<td>${arr[i].hobby}</td>
							<td>
								<button type="button" onclick="upMove(${i})" id="btn1">上移</button>
								<button type="button" onclick="del(${arr[i].id})">删除</button>
								<button type="button" onclick="downMove(${i})" id="btn2">下移</button>
							</td>
						</tr>`
			}
			var trs = document.querySelectorAll("tbody>tr")
			// console.log("trs:", trs)
			if(trs.length > 1){
				tbody.firstElementChild.lastElementChild.firstElementChild.disabled = true;
				tbody.lastElementChild.lastElementChild.lastElementChild.disabled = true;
			}
		}
		
		function del(myid){
			var f = confirm()
			console.log(f)
			if(f){	
			for(var i=0;i<arr.length;i++){
				if(arr[i].id == myid){
					arr.splice(i,1)
				}
				localStorage.arr = JSON.stringify(arr)
				show(arr)
			}
		  }
		}
		
		//上移功能
		function upMove(i){
			// console.log("i:", i)
			console.log("arr[i]:", arr[i])
			if(i != 0){
				var t = arr[i]
				arr[i] = arr[i-1]
				arr[i-1] = t
			}
			localStorage.arr = JSON.stringify(arr)
			show(arr)
		}
		
		//下移功能
		function downMove(i){
			console.log("arr[i+1]:", arr[i+1])
			if(i != arr.length -1){
				var t = arr[i]
				arr[i] = arr[i+1]
				arr[i+1] = t
			}
			localStorage.arr = JSON.stringify(arr)
			show(arr)
		}
	</script>
</html>
